<template>
  <div class="home" v-if="homeData">
    <!-- 导航条 -->
    <van-nav-bar title="智慧商城" fixed />

    <!-- 搜索框 -->
    <van-search />
    <van-search
      readonly
      shape="round"
      background="#f1f1f2"
      placeholder="请输入搜索关键词"
      @click="$router.push('/search')"
    />

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in homeData[1].data" :key="item.imgUrl">
        <img :src="item.imgUrl" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 导航 -->
    <van-grid column-num="5" icon-size="40">
      <van-grid-item
        v-for="item in homeData[4].data"
        :key="item.imgUrl"
        :icon="item.imgUrl"
        :text="item.text"
        @click="$router.push('/category')"
      />
    </van-grid>

    <div class="main">
      <img src="../../assets/img/main.png" alt="" />
    </div>

    <!-- 猜你喜欢 -->
    <div class="guess">
      <p>
        <van-divider
          class="guess-title"
          :style="{
            color: '#1989fa',
            borderColor: '#1989fa',
            padding: '0 16px',
          }"
        >
          猜你喜欢
        </van-divider>
      </p>
      <div class="goods-list">
        <LikeList :list="homeData[6].data"></LikeList>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, toRefs } from "vue";
import { useCommon } from "../../hooks/common";
import { useDataStore } from "../../store/data";
import LikeList from "../../components/LikeList.vue";
const { gotopage } = useCommon();

const dataStore = useDataStore();
const { getHomeDataAsync } = dataStore;

const { homeData } = toRefs(dataStore) as any;

onMounted(() => {
  getHomeDataAsync();
});
</script>
  
<style lang="scss" scoped>
.my-swipe {
  width: 100%;
  height: 185px;
}
.my-swipe img {
  width: 100%;
}
.main {
  width: 100%;
  height: 134px;
}
.main img {
  width: 100%;
}
</style>